Shout3D™ 2.0 - Demos

Demos Guide

Shout3D 2.0 comes bundled with a great many demos. This page provides links that lead to many of them. The html files for the demos are all located in Shout3d_runtime\demos, and the name of each html file is listed after each demo's description.

All the models (VRML files, .s3d files, image files and sounds) are located in the Shout3d_runtime\codebase\models directory. Some of the demos utilize custom applets and custom nodes. The source code for the custom applets is in Shout3d_runtime\codebase\applets, and the source for the custom node Pyramid is in Shout3d_runtime\codebase\custom_nodes.

The demos are arranged into the following categories.  Categories containing new demos are followed by "new in 2.0!", as are the names of new demos within the document. Click the category to go to that section.

Note:  Demos for most of the features that were added for the 2.0 release are not listed in this file. See the file newIn2.0.html for an exhaustive listing of these new features.

• Interactive Render Demo (new in 2.0!)
• Animated Scenes
• "Walk" Navigation
• "Examine" Navigation
• An Interactive Game
• Sound
• JavaScript
• Interacting with Scenes
• Rendering Effects
• Points and Lines
• Picking Tests
• Logic Nodes
• Creating a new Node Type

Interactive Render Demo (New in 2.0)

This demo shows off some of the new rendering capabilities in Shout3D 2.0.   Click here to launch it. The demo displays a model and lets you interactively play with the parameters of these new features:

• Shout3D's new MultiAppearance node -- an incredibly rich new way to combine all kinds of rendering effects on any surface.  This new node works with any kind of surface geometry, from Shout3D 1.0's IndexedFaceSet, to all the old VRML stand-bys (Box, Cone, Cylinder, Sphere, Extrusion, and ElevationGrid have been added in this release), to some new kinds of geometry introduced in Shout3D 2.0 --  MultiMesh and NurbsSurface.  This demo lets you adjust:
  • selfIllumination - toggles between lighting models where the object is self illuminated or lit by the lights in the scene.
  • wireframe - toggles between solid and wireframe
  • material properties -- Shout3D 2.0 adds specularColor and shininess to the old crew.
  • modulate texture with diffuse -- toggles between a mode where diffuseColor applies a tint to the diffuse texture, or where the diffuse textures color is always taken to be its full value
  • maps - lets you apply all different kinds of texture maps in any combination.  Each map has a toggle to enable/disable that map, and to turn bilinear filtering of the map on and off.  Bilinear filtering makes the texture appear smoother.
    • diffuseMap - applies a regular diffuse texture.
    • alphaMap - varies the transparency of the model based on values in a texture map
    • bumpMap - varies the bumpiness of the surface based.  The "amount" slider lets you make it more or less bumpy.
    • specularLevelMap - varies the amount of reflectivity over the surface, so highlights will show up differing amounts across the surface.
    • environmentMap - applies a surrounding environment map, in one of 3 modes you control:
      • ADD - adds the color of what you see reflected on the surface to the color resulting from the other material and texture calculations.
      • MODULATE - multiplies the color of what you see reflected on the surface to the color resulting from the other material and texture calculations.
      • LIGHT_MAP - ignores all other lighting calculations (but not the diffuse, alpha, or bump maps) and applies the environment texture as if each pixel were a light pointing inward, with that lights color given by the pixel.
• Panorama -a background panorama that you can enable/disable. You can also toggle bilinear filtering on the panorma.
• Anti-aliasing - try out two kinds of anti-aliasing.  Progressive Anti-Aliasing performs full-scene antialiasing when you stop moving the camera.  Normal anti-aliasing smooths the edges between the model and the background each time the scene is rendered.
• Lights - This is not a new feature, but it lets you see how the other features react under different lighting conditions.  Check boxes let you toggle between still and animated lights, or between colored and white lights.

Animated Scenes

Each of these displays a scene authored as a VRML 2.0 file, then converted to Shout3D's smaller .s3d format.. There's no interaction in the applet, just playback of an animated 3D scene.

• modswing- a short animated character scene.(modswing.html)
• ratPack -- another short animated scene.(ratpack.html)
• x3d logo-- an animation of the X3D logo(x3d_logo.html)
• antialiased x3d logo -- the X3D logo, but with antialiasing performed against the background for cleaner edges.(antialiased_x3d_logo.html)
• beatMonkBash-- a longer (~1 minute) 3D chase scene with Mod agents Jo and Oscar.(beatMonkBash.html)

"Walk" Navigation

This demo lets you click and drag to "walk" through a virtual environment. click-drag in the window to walk. Move the cursor up/down to move forward/backward, or left/right to make turns. The source code for this navigating applet is in Shout3d_runtime\codebase\applets\WalkPanel.java and WalkApplet.java

• walk demo-- a walk through a virtual space station.(walk_demo.html)

"Examine" Navigation

This demo lets you click and drag in the applet to tumble the scene, a paradigm known as "Examine" navigation. click-drag in the window to rotate the scene, press the control key and drag to zoom in and out The source code for this navigating applet is in Shout3d_runtime\codebase\applets\ExaminePanel.java and ExamineApplet.java

• examine willy -- recognize this guy? (examine_demo.html)

An Interactive Game

This game shows how you can capture and react to mouse input to drive the action of an interactive game containing real time physics. Source code for the game is in Shout3d_runtime\codebase\applets\ModDunkPanel.java and ModDunkApplet.java

• Mod Dunk - click and hold to bring Ward Hole's arm back. later, release to let the plunger fly and try to hit the target. (moddunk.html)

Sound

Shout3D applets can play sounds, too. The model for this scene (Shout3d_runtime\codebase\models\beatMonkBash_with_sound.html) contains Shout3D's JavaSound node to play back a soundtrack while the animation runs.

• Beat Monk Bash with Sound (beatMonkBash_with_sound.html)

JavaScript

Shout3D applets can be controlled using JavaScript right in the html page. All the interaction in the following demos is accomplished by using JavaScript to make programming calls into the Shout3D applet displayed on the page. Click 'view source' in the browser, or check out the html files in a text editor to see how these work.

• multipurpose JavaScript demo -- click the controls to make Bill do a whole bunch of stuff using JavaScript.(javascript_demo.html)
• jump after animate-- click the text to play Bill's animation and then jump to a different web page as soon as the animation finishes running.
• where's the camera-- click the text to show the camera's current position and orientation.  Click and drag within the applet to change the camera's settings.
• switch Test-- click the text to switch between Jo and Oscar dancing. The two figures are contained below a Switch node, and clicking the text changes the whichChoice field of that switch, effectively swapping the dancers.
• segmented Animation Test-- click the box to make it animate. click the text to change the animation that will be played. This demo shows how to take one long animation and play back different sections of that animation at different times.  It is particularly useful for users who model and export their animations from 3D Studio Max, because this program exports multiple animations end-to-end as one long animation.  So users who want to switch between those sections can follow this example. Click here for more info on modeling hints for 3D Studio Max users.

Interacting with Scenes

Each of the demos below takes advantage of a different Shout3D feature to let you interact with the scene in a different way:

• Anchor Test- click the various objects to go to different viewpoints and see different files. The 3D scene file contains "Anchor" nodes. These are nodes you can click to change the point of view or move to a different file. (anchorTest.html)
• Light Test- click objects to light them, click bottom bar to light them all This test shows how one light can affect any of the different groups or objects in a scene, using the Light node's affectedGroups field. The demo employs the LightTestApplet and LightTestPanel provided in the applets directory. (lightsTest.html)
• v_is_for_viewpoint-- click in the window, then press v repeatedly to change viewpoint, or the b key to change background -- shows how setting the isBound field of Viewpoint and Background nodes will automatically make them be used by viewers. Employs the BindingTestPanel and BindingTestApplet in the applets package.(v_is_for_viewpoint.html)

Rendering Effects

These demos each illustrate a different aspect of Shout3D rendering.

• Double-sided lighting, rotating Polygon- shows double-sided lighting affects an object made of a single polygon (renderTests\doubleSidedTest.html)
• Emissive Plus Texture Dudes-- shows three characters with the same texture, the color of which is tinted by changing their emissive colors. (renderTests\emissivePlusTextureDudes.html)
• Emissive Diffuse Texture Cones-- shows eight textured cones. The top row shows rendering when the diffuseColor is varied, the bottom row shows rendering when the emissiveColor is varied. (renderTests\emissiveDiffuseTextureCones.html)
• Coordinate Interpolators-- shows coordinate interpolators affecting lines, points, and faces (renderTests\coordInterpTest.html)
• Color-per-vertex-- lots of combinations to show how the fields of an IndexedFaceSet can interact to produce differently colored and shaded polygons (renderTests\colorPerVertexCombos.html)
• 8-bit texture transparency -- shows a GIF texture with 8-bit transparency (renderTests\alphaTransparency.html)

Points and Lines

Shout3D can render lines and points of different widths and sizes.sizes.

• Line Robot- shows the use of the lineWidth, pointSize fields (lineRobot.html)

Picking Tests

Each of these demos employs an applet that tracks the movement of the cursor over the scene to show what is picked. move the cursor over the applet window to see an arrow that hugs the picked object's surface. These examples employ the MultiTestApplet and MultiTestPanel in the applets directory.

• Picking some strangely scaled shapes(pickTests\pickTest1_scales.html)
• Picking on characters as they animate(pickTests\pickTest3_modswing.html)
• Picking with an animated viewpoint(pickTests\pickTest2_viewUnderPath.html)

Logic Nodes

These demos each illustrate the use of Shout3D's logic nodes. Each demo shows the use of a different type of logic node. The logic is all contained within the .s3d files that describe the scenes, with no additional Java or JavaScript programming.

• booleanEventToCurrentTime move the cursor over the box to start an animation. shows how a boolean event (the cursor going over the cube) is transformed into a time (the startTime of a TimeSensor). (booleanEventToCurrentTimeTest.html)
• booleanEventToInteger click the box multiple times to display different objects to the right of the box. shows how boolean events (true and false values coming from a toggle) can be used to push different integer values (the differing values are selecting different numbered choices of a switch node). (booleanEventToIntegerTest.html)
• doubleEventToBoolean click the red box to turn light on, click the green box to turn light off. shows how double events (times from different TouchSensors) can be used to push different boolean values (true or false values for the light's on field). (doubleEventToBooleanTest.html)
• doubleEventToInteger click the box multiple times to display different objects to the right of the box. shows how double events (times from a TouchSensor) can be used to push different integer values (the differing values are selecting different numbered choices of a switch node). (doubleEventToIntegerTest.html)
• timeSensorPauser clicking the boxes, left to right: #1=start, #2=stop, #3=togglePaused, #4=reset. shows how a TimeSensorPauser can be used to toggle the pausing of a TimeSensor, as well as to reset the TimeSensor to start playing from the beginning. (timeSensorPauserTest.html)
• toggle click the box repeatedly to turn the light on and off. shows how a double input (the touchTime of a TouchSensor) can be used to create toggling true/false values (the on field of a light). (toggleTest.html)

Creating a new Node Type

these two demos show how Java programmers can create a new type of node, then use it within a Shout3D scene. Both of these the Pyramid node, the source code for which is provided in Shout3d_runtime\codebase\custom_nodes\Pyramid.java.

• onePyramid-- uses Shout3D's automatic mechanism for finding and reading new Node subclasses. Reads and displays an s3d file containing a pyramid.(onePyramid.html)
• pyramidClickStretch-- click drag on a pyramid, move left/right to edit width&depth, up/down to edit height (pyramidClickStretch.html) This demo employs a custom applet, (source code is in PyramidTestApplet and PyramidTestPanel of the applets directory) to create 3 Pyramids, watch for mouse input, and change the sizes of the pyramids..

Copyright© 1999-2000, Eyematic Interfaces, Inc.